<!--收藏列表-->
<template>
    <f7-page no-toolbar :page-content="false">
        <f7-navbar back-link="Back">
            <f7-toolbar tabbar top>
                <f7-link tab-link="#oneTab" tab-link-active>收藏聚会</f7-link>
                <f7-link tab-link="#twoTab">收藏的人</f7-link>
            </f7-toolbar>
        </f7-navbar>

        <f7-tabs swipeable>
            <f7-tab id="oneTab" tab-active>
                <f7-page
                        infinite
                        no-toolbar
                        with-subnavbar
                        :infinite-distance="50"
                        :infinite-preloader="showPreloader"
                        @infinite="loadMore"
                        ptr @ptr:refresh="refresh"
                >
                    <f7-list media-list form class="list-margin">
                        <f7-list-item chevron-center swipeout v-for="(item, index) in 10" :key="index"
                                      title="2019东莞自驾游"
                                      link="/activity/actDetail/"
                                      subtitle="时间:2019-09-09 15:00">
                            <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg"
                                 width="60"/>
                            <!--<f7-link icon-f7="heart"  target="_blank" text="评价" ></f7-link>-->
                        </f7-list-item>
                    </f7-list>

                    <!-- 查看组织者 -->
                    <f7-actions ref="actionsOneGroup">
                        <f7-actions-group>
                            <f7-actions-button @click="$f7router.navigate('/member/userView/')">查看聚会</f7-actions-button>

                            <f7-actions-button color="red">取消</f7-actions-button>
                        </f7-actions-group>
                    </f7-actions>
                </f7-page>
            </f7-tab>

            <f7-tab id="twoTab">
                <f7-page
                        infinite
                        :infinite-distance="50"
                        :infinite-preloader="showPreloader"
                        @infinite="loadMore"
                        ptr @ptr:refresh="refresh"
                >
                    <f7-list media-list form class="list-margin">
                        <f7-list-item v-for="(item, index) in 5" :key="index"
                                      link="/member/memberView/"
                                      title="大卫david"
                                      after="广东-深圳"
                                      subtitle="28岁"
                                      text="深情不及久伴，厚爱无需多言！深情不及久伴，厚爱无需多言！"
                        >
                            <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="100" />
                        </f7-list-item>
                    </f7-list>

                    <!-- 查看组织者 -->
                    <f7-actions ref="actionsTwoGroup">
                        <f7-actions-group>
                            <f7-actions-button @click="$f7router.navigate('/member/userView/')">申请加急审核
                            </f7-actions-button>
                            <f7-actions-button color="red">取消</f7-actions-button>
                        </f7-actions-group>
                    </f7-actions>
                </f7-page>
            </f7-tab>

        </f7-tabs>
    </f7-page>
</template>

<script>
    export default {
        components: {},
        data() {
            return {
                showPreloader: true,
                items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
                swiperParams: {
                    // speed: 500,
                    loop: true,
                    // height:600,
                    // autoplay: {
                    //   delay: 1500,
                    // },
                    direction: 'vertical'
                    // preventLinksPropagation: false   // 阻止点击事件冒泡
                },
            };
        },
        methods: {
            refresh(event, done) {
                setTimeout(() => {
                    // todo
                    done();
                }, 1000);
            },

            loadMore() {
                const self = this;
                if (!self.allowInfinite) return;
                self.allowInfinite = false;

                setTimeout(() => {
                    if (self.items.length >= 200) {
                        self.showPreloader = false;
                        return;
                    }

                    const itemsLength = self.items.length;

                    for (let i = 1; i <= 20; i += 1) {
                        self.items.push(itemsLength + i);
                    }

                    self.allowInfinite = true;
                }, 1000);
            },

        }
    }
</script>

